<template>
	<view class="container">
		<!-- 专题分类 -->
		<view class="cate-section">
			<view class="cate-item" v-for="item in category" :key="item.id" @click="setid(item.id)">
				<image :src="item.image"></image>
				<text>{{item.name}}</text>
			</view>
			
		</view>
		<!-- 专题列表 -->
		<view class="special-section">
			<view class="special-item bg_ff"  v-for="(item, index) in List" :key="item.id" >
				<navigator :url= "'/pages/special/detial?id='+item.id">
					<image class="item-img"  :src="item.cover_image" mode="aspectFill"></image>
					<view class="special-text">
						<view class="text-tittle">
							<image class="icon-huo" src="../../static/img/num_d/huo.png" mode="aspectFill"></image>
							<text>{{item.name}}</text>
							<text class="red">{{item.start_price}}元起</text>
						</view> 
						<view class="color_9 text-small">
							<image class="eye" src="../../static/img/7/7-11.png"  mode="aspectFill"></image> {{item.look}}人看过
							<image class="heart" src="../../static/img/7/7-10.png" mode="aspectFill"></image> {{item.collect}}
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				loadingType: 'more', //加载更多状态
				List: [],
				category:[],
				shop_id:''
	
			}
		},
		onLoad(options) {
			this.shop_id = options.id
			this.loadData()
		},
		methods:{
			loadData(){
				this.$Request.post4(
					this.$api.httpApi.special.category, {shop_id:this.shop_id}
				).then(res => {
					if (res.code == 1) {
						this.category = res.data
				
					}
				})
				this.$Request.post4(
					this.$api.httpApi.special.topic, {
						limit:10,
						page:1,
						shop_id:this.shop_id
					}
				).then(res => {
					if (res.code == 1) {
						this.List = res.data.data
				
					}
				})
			},
			setid(id){
				this.$Request.post4(
					this.$api.httpApi.special.topic, {
						class_id:id,
						limit:10,
						page:1,
						shop_id:this.shop_id
					}
				).then(res => {
					if (res.code == 1) {
						this.List = res.data.data
				
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{background: #E9E9E9;}
	.special-section{
		padding-bottom: 50upx;
	}
	.special-item{
		margin-top: 20upx;
	}
	.cate-section {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap:wrap;
		padding: 30upx 22upx; 
		background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size:24upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:#333;
			margin-right: 30upx;
			margin-bottom: 20upx;
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width:111upx;
			height: 111upx;
			margin-bottom: 14upx;
			border-radius: 50%;
		}
	}
	.special-text{
	   background: #fff;
	   padding: 20upx 36upx;
	
	}
	.text-tittle image{
		width: 37upx;
		height: 37upx;
		vertical-align: middle;
		margin-right: 10upx;
	}
	.text-small image{
		vertical-align: middle;
		margin-left:  30upx;
		margin-right: 8upx;
	}
	.text-small .eye{
		width: 30upx;
		height: 17upx;
	}
	.text-small .heart{
		width: 25upx;
		height: 23upx;
	}
	.special-text .text-tittle{
		font-size: 27upx;
		margin: 15upx 0;
	}
	.text-small{
		font-size: 18upx;
	}
	.red{
		color: #F0406F;
		float: right;
	}
	.item-img{
		width: 100%;
		height: 450upx;
	}
</style>
